<template>
  <view class="score-detail-list">
    <view v-for="(item, index) in scoreDetailList" :key="index" class="score-item">
      <view class="left">{{ item.name }}</view>
      <view class="center">{{ item.reason }}</view>
      <view class="right">
        <text class="score">+{{ item.score }}</text>
        <text class="unit ml-10">积分</text>
      </view>
      <view v-if="index !== scoreDetailList.length - 1" class="divider"></view>
    </view>
  </view>
</template>

<script setup>
  const props = defineProps({
    scoreDetailList: {
      type: Array,
      default: () => []
    }
  })
</script>

<style lang="scss" scoped>
  .ml-10{
    margin-left: 20rpx;
  }
  .score-detail-list {
    background: #2D2E33;
    border-radius: 16rpx;
    padding: 0 0 16rpx 0;
    margin: 0 0 32rpx 0;

    .score-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 28rpx 24rpx 28rpx 24rpx;
      font-size: 28rpx;
      color: #fff;
      position: relative;
      

      .left {
        min-width: 120rpx;
        color: #fff;
        font-weight: 500;
        text-align: left;
      }

      .center {
        flex: 1;
        color: #ccc;
        text-align: center;
        font-size: 26rpx;
        padding: 0 8rpx;
        font-weight: 400;
      }

      .right {
        min-width: 140rpx;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .score {
          color: #ffd700;
          font-size: 32rpx;
          font-weight: 700;
          margin-right: 4rpx;
          letter-spacing: 1rpx;
        }

        .unit {
          color: #fff;
          font-size: 26rpx;
          font-weight: 400;
        }
      }

      &::after {
        content: '';
        position: absolute;
        left: 24rpx;
        right: 24rpx;
        bottom: -1rpx;
        height: 1rpx;
        background: #000;
        border-radius: 1rpx;
        display: block;
      }

      &:last-child::after {
        display: none;
      }
    }
  }
</style>